﻿@page "/datagrid-filter-template"

<h1>DataGrid custom Column FilterTemplate</h1>

<p>This page demonstrates how to define custom DataGrid column filter template.</p>

<RadzenExample Name="DataGridColumnFilterTemplate" Heading="false" Documentation="false">
    @if (employees == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <RadzenDataGrid Data=@filteredEmployees FilterMode="FilterMode.Simple" AllowFiltering="true" AllowPaging="true" AllowSorting="true" TItem="Employee" ColumnWidth="200px">
            <Columns>
                <RadzenDataGridColumn TItem="Employee" Property="ID" Title="ID" />
                <RadzenDataGridColumn TItem="Employee" Property="Name" Title="Name" />
                <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy">
                    <FilterTemplate>
                        <RadzenDropDown @bind-Value="@currentTOC" TextProperty="Text" ValueProperty="Value" Style="width:100%"
                                        Change=@OnChange
                                        Data="@(Enum.GetValues(typeof(TitleOfCourtesy)).Cast<TitleOfCourtesy>().Select(t => new { Text = $"{t}", Value = t }))" />

                    </FilterTemplate>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
    }
</RadzenExample>

@code {
    public enum TitleOfCourtesy
    {
        Ms,
        Mr,
        All = -1
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public TitleOfCourtesy TitleOfCourtesy { get; set; }

    }

    void OnChange()
    {
        filteredEmployees = employees.Where(e => currentTOC >= 0 ? e.TitleOfCourtesy == currentTOC : true);
    }

    IEnumerable<Employee> employees;
    TitleOfCourtesy currentTOC;
    IEnumerable<Employee> filteredEmployees;

    protected override async Task OnInitializedAsync()
    {
        employees = await Task.FromResult(Enumerable.Range(0, 10).Select(i =>
            new Employee
            {
                ID = i,
                Name = $"Name{i}",
                TitleOfCourtesy = i < 5 ? TitleOfCourtesy.Mr : TitleOfCourtesy.Ms
            }));
        
        filteredEmployees = employees;
    }
}
